<template>
  <div>
    <el-container style="width: 1423px">
      <el-header class="Top" style="height: 30px">
        <!-- 头部下拉菜单 -->
        <el-dropdown class="TopDropdown1">
          <span class="el-dropdown-link">
            <i class="el-icon-s-flag"></i>中国大陆<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>福建</el-dropdown-item>
            <el-dropdown-item>广西</el-dropdown-item>
            <el-dropdown-item>广东</el-dropdown-item>
            <el-dropdown-item>江西</el-dropdown-item>
            <el-dropdown-item>四川</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <!-- 注册和登录 -->
        <div class="HeaderBtnLr">
         <i class="el-icon-s-custom"></i><el-button type="text" class="loginBtn" style="color: red"
            >亲，请登录</el-button
          >
          <el-button type="text" class="registerBtn">免费注册</el-button>
          <el-button type="text" style="color:red" class="default" @click="returnDefault">首页</el-button>
        </div>

        <!-- 购物车和收藏夹 -->
        <div class="HeaderBtnSc">
          <i class="el-icon-s-goods"></i
          ><el-button type="text" class="ShoppingCart" style="color: red"
            >购物车</el-button
          >
         <i class="el-icon-s-marketing"></i><el-button type="text" class="ShoppingCart" style="color: red"
            >我的订单</el-button
          >
          <el-dropdown>
            <span class="Favorites">
              <i class="el-icon-star-on"></i>收藏夹<i
                class="el-icon-arrow-down el-icon--right"
              ></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="collectionGoods">收藏的宝贝</el-dropdown-item>
              <el-dropdown-item @click.native="collectionShop">收藏的店铺</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <div class="HeaderBtnFa">
         <i class="el-icon-s-shop"></i> <el-button type="text" class="FreeOpenShop" @click="gotoOpenShop">免费开店</el-button>
         <i class="el-icon-s-opportunity"></i> <el-button type="text" class="FreeOpenShop" @click="gotoNewArrival">新品上市</el-button>
          <el-dropdown>
            <span class="Favorites">
             <i class="el-icon-phone"></i> 联系客服<i
                class="el-icon-arrow-down el-icon--right"
              ></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="gotoConsumerServices">消费者客服</el-dropdown-item>
              <el-dropdown-item @click.native="pushMessage">商家服务大厅</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
         <i class="el-icon-question"></i><el-button type="text" class="aboutOur" @click="gotoAboutOur">关于我们</el-button>
        </div>
      </el-header>



      <el-main>
        <router-view></router-view>
      </el-main>



      <el-footer>
          <div class="footer" style="width:100%;height:40px;background-color:white">
            <el-button type="text" class="ICP">ICP备案号:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</el-button>
            <el-button type="text" class="gongan">公安备案号:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</el-button>
          </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    methods:{
        returnDefault(){
            this.$router.push('/default')
        },
        gotoNewArrival(){
            this.$router.push('/newArrival')
        },
        gotoOpenShop(){
            this.$router.push('/openShop')
        },
        pushMessage(){
            this.$message.error("该功能尚未开发完全，敬请期待！！！")
        },
        gotoConsumerServices(){
            this.$router.push('/consumerServices')
        },
        gotoAboutOur(){
            this.$router.push('/aboutOur')
        },
        collectionGoods(){
          this.$router.push('/collectionGoods')
        },
        collectionShop(){
          this.$router.push('/collectionShop')
        }
    }
};
</script>

<style scoped>
/* 头部 */
.Top {
  width: 100%;
  height: 30px;
  background-color: #f5f5f5;
}
/* 位置下拉菜单 */
.TopDropdown1 {
  margin-left: 0px;
}
/* 注册和登录 */
.HeaderBtnLr {
  margin-left: 100px;
  margin-top: -29px;
}
/* 购物车和收藏夹 */
.HeaderBtnSc {
  margin-left: 700px;
  margin-top: -39px;
}
.Favorites {
  margin-left: 10px;
}
.el-icon-star-on {
  font-size: 17px;
}
.el-icon-s-marketing{
    font-size: 16px;
    margin-left: 3px;
    margin-top: 3px;
}
/* 免费开店和关于我们 */
.HeaderBtnFa {
  margin-left: 1030px;
  margin-top: -40px;
}
.el-icon-question{
    margin-left: 5px;
}
.el-icon-s-opportunity{
     margin-left: 5px;
}
.FreeOpenShop{
    margin-left: -3px;
}

/*此处是为了将原有的横向滚动条隐藏，原本的滚动条很丑*/
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.ICP{
float: left;
margin-left: 200px;
}
.gongan{
float: left;
margin-left: 200px;
}
</style>